@use "scss/colors";
@use "scss/mixins";
@use "scss/variables";

.workspaceItem__button {
  @include mixins.shadow;

  background: colors.$foreground;
  border-radius: variables.$border-radius-lg;
  border: none;
  padding: variables.$spacing-xl variables.$spacing-xl;
  width: 100%;
  min-height: 100px;
  overflow-wrap: break-word;

  &:hover,
  &:focus-visible {
    background: colors.$grey-50;
  }
}

.workspaceItem__workspaceButtonTextContent {
  width: 100%;
  flex: 1;
  min-width: 0;
}

.workspaceItem__workspaceName {
  flex: 1;
  overflow-wrap: break-word;
}

.workspaceItem__workspaceButtonCaret {
  flex-shrink: 0;
}

.workspaceItem__memberPill {
  background: colors.$green-30;
  border-radius: variables.$border-radius-pill;
  color: colors.$green-500;
  border: variables.$border-thin solid colors.$green-50;
  width: fit-content;
}

.workspaceItem__adminPill {
  background: colors.$blue-30;
  border-radius: variables.$border-radius-pill;
  color: colors.$green-500;
  border: variables.$border-thin solid colors.$blue-50;
  width: fit-content;
}
